<!--
 * @Author: Dorange.Wang
 * @Date: 2021-03-31 16:04:51
 * @LastEditors: wangming
 * @LastEditTime: 2021-08-05 17:00:07
 * @Description: file content
-->
<template>
  <el-dialog :visible="showVisible" center :show-close="false" width="600px">
    <div class="b g3 f16 tl" slot="title">
      <div class="ks-row-between pl15 pr15">
        <span>确认关闭</span>
        <span
          class="el-icon-close g9 f26 poi"
          @click="showVisible = false"
        ></span>
      </div>
    </div>
    <div class="tc f18 g3">
      {{ message }}
    </div>
    <div slot="footer" class="tr">
      <el-button @click="showVisible = false">取 消</el-button>
      <div class="ml10 dib"></div>
      <el-dropdown @command="handleCommand">
        <el-button type="primary">
          更多操作<i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            :command="i.value"
            :key="index"
            v-for="(i, index) in option"
          >
            {{ i.label }}</el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      message: "",
      showVisible: false,
      callback: () => {},
      option: [],
    };
  },
  methods: {
    handleCommand(type) {
      this.callback(type);
      this.showVisible = false;
    },
    //islock false  表示自己锁定的  insave false 表示被被修改过
    openForm({ islock, insave }) {
      this.option = [{ label: "直接关闭", value: "a" }];
      if (!islock) {
        this.message = "页面已经锁定，确认要离开页面？";
        this.option.push({ label: "解锁并关闭", value: "c" });
      }
      if (!insave) {
        this.message = "页面有修改，关闭可能使得内容丢失，确认要关闭？";
        this.option.push({ label: "保存并关闭", value: "b" });
      }
      if (!insave && !islock) {
        this.option.push({
          label: "保存解锁并关闭",
          value: "d",
        });
      }
      this.option.reverse();
      this.showVisible = true;
      return {
        then: (callback) => {
          if (typeof callback === "function") {
            this.callback = callback;
          }
        },
      };
    },
  },
};
</script>

<style lang="scss" scoped></style>
